<!--<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>朱朱制作</title>
<script src="../mui/js/jquery.min.js" type="text/javascript"></script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background-color: #fff;
        font-family: "微软雅黑";
        font-size: 18px;
        width: 1000px;
        margin: 50px auto;
        color:#000000;
    }
    .wrapper{
        width: 350px;
    }
    #nav ul{
        border-bottom: 2px solid  yellowgreen;
        height: 32px;
    }
    #nav li{
        display: inline-block;
        border: 2px solid #999;
        border-bottom: none;
        margin-left: 10px;
        width: 65px;
        text-align: center;
        line-height: 30px;
    }
    #nav li:hover{
        cursor: pointer;
    }
    #content{
        display: block;
        border: 1px solid  blue;
        border-top: none;
        text-align: center;
        height: 100px;
        line-height: 100px;
    }
    #nav li.on{
        border-bottom: solid 2px #ffffff;
    }
    .hide{
        display: none;
    }
    .show{
        display: block;
    }
</style>
</head>
<script type="text/javascript">
//  window.onload=change;  //js代码实现
//  function change(){
//  this.nav=document.getElementById("nav");
//  this.li=nav.getElementsByTagName("li");
//  this.cont=document.getElementById("content");
//  this.divi=cont.getElementsByTagName("div");
//  for(var i=0;i<li.length;i++){
//      li[i].index=i;
//      li[i].onclick=function(){
//          for(var i=0;i<li.length;i++){
//          li[i].className="";
//          divi[i].className="hide";
//          }
//      li[this.index].className="on";
//      divi[this.index].className="show";
//      }
//  }
//}
$(function(){
$('#nav li').each(function(){
    $(this).click(function(){
        $('#nav li').removeClass("on");
        $(this).addClass("on");
        $("#content div").removeClass();
        $("#content div").eq($(this).index()).addClass("show").siblings().addClass("hide");
})
})
})
</script>
<body>
    <div class="wrapper">
        <div id="nav">
            <ul>
                <li class="on">num1</li>
                <li>num2</li>
                <li>num3</li>
                <li>num4</li>
            </ul>
        </div><div id="content">
            <div class="show">content1</div>
            <div class="hide">content2</div>
            <div class="hide">content3</div>
            <div class="hide">content4</div>
        </div>
    </div>
</body>
</html>-->
	
	
<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>填写订单</title>
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="./css/mui.min.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<style type="text/css">
			.mui-content>.mui-table-view:first-child {
				margin-top: 0.6rem;
			}
			
			.mui-table-view {
				padding: 0.4rem 0.6rem;
				border-radius: 4px;
			}
			
			.mui-table-view:before,
			.mui-table-view:after,
			.mui-table-view-cell:before,
			.mui-table-view-cell:after,
			.mui-input-group:before,
			.mui-input-group:after,
			.mui-input-group .mui-input-row:after {
				background-color: transparent;
			}
			
			.mui-table-view-cell {
				padding: 0;
			}
			
			.mui-table-view-cell label {
				font-size: 0.7rem;
			}
			
			.mui-table-view-cell.mui-active {
				background-color: #fff;
			}
			
			.mui-table-view-cell>a:not(.mui-btn) {
				white-space: inherit;
			}
			
			.order-bgcolor {
				padding: 0.6rem;
				background: linear-gradient(to right, #fd66a9, #e61874);
			}
			
			.hotel-head,
			.hotel-room,
			.hotel-price,
			.hotel-reduce {
				display: flex;
				justify-content: space-between;
			}
			
			.hotel-head .type {
				font-size: 0.7rem;
				color: #333;
			}
			
			.hotel-room span {
				font-size: 0.7rem;
				color: #999;
			}
			
			.hotel-room .favorable {
				font-size: 0.6rem;
				color: #e61874;
				padding-left: 0.3rem;
			}
			
			.mui-numbox {
				position: relative;
				display: inline-block;
				overflow: hidden;
				width: 5rem;
				height: 1.5rem;
				padding: 0 1.4rem;
				border: none;
				background-color: transparent;
			}
			
			.mui-numbox .mui-input-numbox,
			.mui-numbox .mui-numbox-input {
				border: none !important;
			}
			
			.mui-table-view-cell__bd {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
			}
			
			.font10 {
				font-size: 0.5rem;
			}
			
			.font14 {
				font-size: 0.7rem;
				color: #999;
			}
			
			.font16{
				font-size: 0.8rem;
				color: #333;
			}
			
			.hotel-name {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #fff;
			}
			
			.hotel-name div {
				position: relative;
				font-size: 0.8rem;
				padding: 0 0 15px;
			}
			
			.hotel-name div:after {
				position: absolute;
				width: 100%;
				bottom: 0;
				left: 0;
				height: 2px;
				content: '';
				background-color: #e61874;
				border-radius: 2px;
			}
			
			.data-wrap {
				font-size: 0;
				text-align: center;
			}
			
			.data-item {
				font-size: 0.7rem;
			}
			
			.data-stay {
				font-size: 0.6rem;
				display: inline-block;
				width: 60px;
				height: 18px;
				line-height: 18px;
				text-align: center;
				border: 1px solid #e61874;
				border-radius: 18px;
				margin: 0 21px;
			}
			
			.content-wrap {
				margin: 0.6rem 0;
			}
			
			.flex {
				display: flex;
				align-items: center;
			}
			
			.stay-time {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: 0.6rem;
			}
			
			.favorable {
				width: 1.75rem;
				vertical-align: middle;
			}
			
			.mui-numbox [class*=btn-numbox] {
				width: 1.2rem;
				height: initial;
				margin-top: 3px;
				background-color: transparent;
				-webkit-user-select: none;
			}
			
			.add-sub {
				display: flex;
				align-items: center;
				font-size: 0;
			}
			
			.mui-numbox input {
				border: none;
				outline: none;
				width: 1.4rem;
				text-align: center;
			}
			
			li.room,
			li.username,
			li.tel {
				justify-content: space-between;
				padding-bottom: 0.4rem;
			}
			
			li.room {
				padding-right: 0.6rem;
			}
			
			li.username {
				padding-right: 2.05rem;
			}
			
			li.tel {
				padding-right: 1.35rem;
				padding-bottom: 0;
			}
			
			li.username input,
			li.tel input {
				width: 55%;
				height: 1.5rem;
				font-size: 0.7rem;
    			color: #333;
    			text-align: right;
    			letter-spacing: 0.05rem;
				padding: 0;
				margin-bottom: 0;
				border: none;
				background: transparent;
				
			}
			
			li.username img {
			 	margin-left: 1.2rem;
			}
			
			li.tel label {
				position: relative;
			}
			
			li.tel label:after {
				position: absolute;
				content: '';
				
			}
			
			.icon {
				font-size: 0;
				padding-left: 0.45rem;
			}
			
			.option {
				font-size: 0.7rem;
				color: #333;
				padding-left: 1.5rem;
			}
			
			.invoice {
				padding: 0.4rem 0.6rem;
				background: #fff;
			}
			
			.invoice li {
				justify-content: space-between;
			}
			
			.mui-switch-blue {
				border: 2px solid #e4e4e4;
			}
			
			.mui-switch-blue.mui-active {
				background-color: #e61874;
    			border: 2px solid #e61874;
			}
			
			.stay-hobby {
				padding: 0.75rem 0.6rem;
				margin-top: 0.6rem;
			}
			
			.hotel-list-price {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
			}
			
			.hotel-list-price span {
				color: #ff3399;
			}
			
			.tip {
				display: inline-block;
				font-size: 0.6rem;
				line-height: 0.8rem;
				color: #999;
				padding: 0.6rem 0.6rem 2.5rem;
			}
			
			.foot {
				position: fixed;
				bottom: 0;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 2.25rem;
				padding-left: 0.6rem;
				border-top: 1px solid #e0e0e0;
				background-color: #fff;
			}
			
			.price {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			
			.details {
				line-break: 2.25rem;
				font-size: 0;
				padding: 0 0.3rem 0 0;
			}
			
			.details span {
				font-size: 0.6rem;
				color: #999;
				padding-right: 0.3rem;
			}
			
			.sum {
				font-size: 0.7rem;
				color: #e61874;
			}
			
			.fan {
				font-size: 0.6rem;
				color: #666;
			}
			
			.right {
				display: flex;
   				align-items: center;
			}
			
			.submit {
				width: 6.9rem;
			    height: 2.25rem;
			    line-height: 2.25rem;
			    font-size: 0.9rem;
			    text-align: center;
			    border: none;
			    color: #fff;
			    background-color: #e61874;
			}
			
			/* 弹出框--开始 */
			.mui-plus .plus {
				display: inline;
			}
			
			.plus {
				display: none;
			}
			
			p {
				text-indent: 22px;
			}
			
			span.mui-icon {
				font-size: 14px;
				color: #007aff;
				margin-left: -15px;
				padding-right: 10px;
			}
			
			.mui-popover {
				min-height: 130px;
			}
			/* 弹出框--结束 */
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hotel-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">填写订单</h1>
		</header>
		<div class="mui-content">
			<!-- 订单详情--开始 -->
			<div class="order-bgcolor">
				<ul class="mui-table-view" data-url="./order-detail2.html">
					<li class="hotel-name">
						<div style="color: #e61874;">深圳雅商会馆</div>
					</li>
					<li class="mui-table-view-cell" style="padding: 15px 0;">
						<div class="mui-table-view-cell__bd data-wrap">
							<span class="data-item"><span class="font10">入住</span>&nbsp;-&nbsp;<span>4月7日</span></span>
							<span class="data-stay">共1晚</span>
							<span class="data-item"><span class="font10">离店</span>&nbsp;-&nbsp;<span>4月8日</span></span>
						</div>
					</li>
					<li class="hotel-room">
						<span class="font14">标准单人间<span class="favorable">最优惠</span></span>
						<span class="font14">含单早（预付）</span>
					</li>
				</ul>
			</div>
			<!-- 订单详情--结束 -->
			
			<ul class="mui-table-view content-wrap">
				<li class="mui-table-view-cell room flex">
					<label class="font14">房间数</label>
					<div class="add-sub">
						<div class="mui-numbox">
							<img class="mui-btn mui-btn-numbox-minus" src="../styles/images/order/icon_reduction.png@2x.png" />
							<input class="mui-input-numbox" type="number" style="border: none;" />
							<img class="mui-btn mui-btn-numbox-plus" src="../styles/images/order/icon_add.png@2x.png" />
						</div>
						<span class="font14" style="color:#333;margin-left: 0.75rem;">间</span>
					</div>
				</li>
				<li class="mui-table-view-cell username flex">
					<label class="font14">入住人</label>
					<input type="text" placeholder="请输入您的姓名" />
					<img width="24" src="../styles/images/order/icon_add.png@2x.png" />
				</li>
				<li class="mui-table-view-cell tel flex">
					<label class="font14">中国大陆(+86)</label>
					<input type="text" placeholder="用于接受预定通知" />
				</li>
			</ul>
			<ul class="invoice">
				<li class="flex">
					<span class="font14">需要发票</span>
					<div class="mui-switch mui-switch-blue mui-switch-mini">
						<div class="mui-switch-handle"></div>
					</div>
				</li>
			</ul>
			<ul class="mui-table-view stay-hobby">
				<li class="">
					<label class="font14">住宿偏好</label>
					<span class="option">无</span>
				</li>
			</ul>

			<div class="tip">
				<span>本产品为向酒店或代理商申请的特殊价格产品，无法确保预订成功；订单提交将立即扣款，若预订不成功，房费将原路退还至付款账户中。</span>
			</div>
		</div>

		<div class="foot">
			<div class="price">
				<span class="sum"><span style="font-size: 0.5rem;">￥</span>298</span>
				<!--<span class="fan">返￥60</span>-->
			</div>
			<div class="right">
				<a href="#bottomPopover" class="details mui-btn mui-btn-link mui-pull-right">
					<span>明细</span>
					<img class="up" width="10" src="../styles/images/order/icon_direction_up.png@2x.png" />
				</a>
				<span class="submit" data-url="./pay-orders.html">提交订单</span>
			</div>
		</div>

		<div id="bottomPopover" class="mui-popover mui-popover-bottom">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper" style="text-align: center;">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">2017-4-1 含早</li>
						<li class="mui-table-view-cell">¥298 - 30(积分) = ¥268</li>
						<li class="mui-table-view-cell">总金额: ¥268</li>
					</ul>
				</div>
			</div>
		</div>
		<script src="../mui/js/mui.min.js"></script>
		<script src="../libs/ems.js" data-main='./city.js'></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
		</script>
	</body>

</html>
